<template>
  <div>
    <van-row class="linehr">
      <van-col span="2">
        <van-icon name="arrow-left" />
      </van-col>
      <van-col span="22">
        <van-search placeholder="请输入搜索关键词" v-model="value" />
      </van-col>
    </van-row>
    <van-row class="xuanz">
     <van-col span="18">
      <van-dropdown-menu active-color="#ee0a24">
      <van-dropdown-item v-model="value1" title="综合" :options="option1" />
      <van-dropdown-item title="数量" disabled active-color="#f00" />
      <van-dropdown-item v-model="value2" title="有货优先" :options="option2" active-color="#f00">
        <van-button type="default" @click="onConfirm">重置</van-button>
        <van-button type="danger" @click="onConfirm">确认</van-button>
      </van-dropdown-item>
    </van-dropdown-menu>
  </van-col>
  <van-col span="6">
    <div class="shaixuan" @click="shaiXuanShow">筛选</div>
  </van-col>

</van-row>
    <van-row gutter="10" class="message">
      <van-col span="6">
        <van-button type="default">物流</van-button>
      </van-col>
      <van-col span="6">
        <van-button type="default">新品</van-button>
      </van-col>
      <van-col span="6">
        <van-button type="default" @click="ppaiShow">品牌</van-button>
      </van-col>
      <van-col span="6">
        <van-button type="default" @click="pmccShow">屏幕尺寸</van-button>
      </van-col>
    </van-row>
    <div class="checkxx">
      <van-row v-show="ppaiAblie" class="ppai">
        <van-checkbox-group v-model="result">
          <van-col span="12">
            <van-checkbox name="a" checked-color="#E4393C">华为(HUAWEI)</van-checkbox>
          </van-col>
          <van-col span="12">
            <van-checkbox name="b" checked-color="#E4393C">小米(MI)</van-checkbox>
          </van-col>
          <van-col span="12">
            <van-checkbox name="c" checked-color="#E4393C">OPPO</van-checkbox>
          </van-col>
          <van-col span="12">
            <van-checkbox name="d" checked-color="#E4393C">vivo</van-checkbox>
          </van-col>
          <van-col span="12">
            <van-checkbox name="e" checked-color="#E4393C">Apple</van-checkbox>
          </van-col>
          <van-col span="12">
            <van-checkbox name="f" checked-color="#E4393C">荣耀</van-checkbox>
          </van-col>
          <van-col span="12">
            <van-checkbox name="g" checked-color="#E4393C">三星</van-checkbox>
          </van-col>
          <van-col span="12">
            <van-checkbox name="h" checked-color="#E4393C">诺基亚</van-checkbox>
          </van-col>
        </van-checkbox-group>
        <van-col span="12">
          <van-button type="default" @click="onConfirm">重置</van-button>
        </van-col>
        <van-col span="12">
          <van-button type="danger" @click="onConfirm">确认</van-button>
        </van-col>
      </van-row>

      <van-row v-show="pmccAblie" class="pmcc">
        <van-checkbox-group v-model="result1">
          <van-col span="12">
            <van-checkbox name="a" checked-color="#E4393C">6.95英寸及以上</van-checkbox>
          </van-col>
          <van-col span="12">
            <van-checkbox name="b" checked-color="#E4393C">6.0~6.24英寸</van-checkbox>
          </van-col>
          <van-col span="12">
            <van-checkbox name="c" checked-color="#E4393C">6.85~6.94英寸</van-checkbox>
          </van-col>
          <van-col span="12">
            <van-checkbox name="d" checked-color="#E4393C">6.75~6.84英寸</van-checkbox>
          </van-col>
          <van-col span="12">
            <van-checkbox name="e" checked-color="#E4393C">6.65~6.74英寸</van-checkbox>
          </van-col>
          <van-col span="12">
            <van-checkbox name="f" checked-color="#E4393C">6.55~6.64英寸</van-checkbox>
          </van-col>
          <van-col span="12">
            <van-checkbox name="g" checked-color="#E4393C">6.45~6.54英寸</van-checkbox>
          </van-col>
          <van-col span="12">
            <van-checkbox name="h" checked-color="#E4393C">6.35~6.44英寸</van-checkbox>
          </van-col>
        </van-checkbox-group>
        <van-col span="12">
          <van-button type="default" @click="onConfirm">重置</van-button>
        </van-col>
        <van-col span="12">
          <van-button type="danger" @click="onConfirm">确认</van-button>
        </van-col>
      </van-row>
    </div>

    <div class="commlist">
      <van-card
        num="2"
        price="1089"
        desc="荣耀9X 麒麟810 4000mAh超强续航 4800万超清夜拍 6.59英寸升降全面屏 全网通4GB+64GB 魅海蓝"
        title="荣耀9X 麒麟810 4000mAh超强续航 4800万超清夜拍 6.59英寸升降全面屏 全网通4GB+64GB 魅海蓝"
        thumb="https://img14.360buyimg.com/n2/s240x240_jfs/t1/96171/11/9171/206904/5e0b339aE5e7da5f5/5290f777ccde490b.jpg!q70.jpg"
      >
        <div slot="tags">
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
        </div>
      </van-card>

      <van-card
        num="2"
        price="2998.00"
        desc="3200万自拍"
        title="小米（MI） CC9e"
        thumb="https://img10.360buyimg.com/n2/s240x240_jfs/t1/108128/22/2925/154854/5e0b7f91E35677ace/c84adacd0140f105.jpg!q70.jpg"
      >
        <div slot="tags">
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
        </div>
      </van-card>
      <van-card
        num="2"
        price="1999.00"
        desc="【双模5G新品|敬请关注1月7日14点新品发布会】realme 真我X50"
        title="【双模5G新品|敬请关注1月7日14点新品发布会】realme 真我X50"
        thumb="https://img10.360buyimg.com/n2/s240x240_jfs/t1/107577/16/3639/309247/5e130de7Ed9d66da2/d3ea08097a72f53d.jpg!q70.jpg"
      >
        <div slot="tags">
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
        </div>
      </van-card>
      <van-card
        num="2"
        price="398.00"
        desc="苏泊尔（SUPOR）电水壶 烧水壶热水壶 全钢无缝电热水壶 304不锈钢开水壶 双层防烫 SW-15J319"
        title="苏泊尔（SUPOR）电水壶 烧水壶热水壶 全钢无缝电热水壶 304不锈钢开水壶 双层防烫 SW-15J319"
        thumb="https://img10.360buyimg.com/n2/s240x240_jfs/t1/73689/32/6598/116425/5d4bd92cEb6f0de6d/fd9b87e2c6070135.jpg!q70.jpg"
      >
        <div slot="tags">
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
        </div>
      </van-card>
      <van-card
        num="2"
        price="268.00"
        desc="美的（Midea）电水壶热水壶电热水壶304不锈钢1.7L容量双层防烫暖水壶烧水壶开水壶WHJ1705C"
        title="美的（Midea）电水壶热水壶电热水壶304不锈钢1.7L容量双层防烫暖水壶烧水壶开水壶WHJ1705C"
        thumb="https://img10.360buyimg.com/n2/s240x240_jfs/t1/106548/7/8947/426330/5e0b1724E85fc9edc/00101e4b7e4dfc5b.jpg!q70.jpg"
      >
        <div slot="tags">
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
        </div>
      </van-card>
    </div>
    <van-popup v-model="show" :get-container="getContainer" position="right">
      <div class="container">

      <van-row gutter="10" class="bgcolor">
  <van-col span="10"  >配送至</van-col>
  <van-col span="14" class="address">四川成都黑马</van-col>

</van-row>
   <van-row class="bgcolor">
  <van-col span="8">
    <div class="xuanx">京东物流</div>
  </van-col>
  <van-col span="8">
     <div class="xuanx">有货优选</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">货到付款</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">新品</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">京东国际</div>
  </van-col>
    <van-col span="8">
    <div class="xuanx">京东物流</div>
  </van-col>
  <van-col span="8">
     <div class="xuanx">有货优选</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">货到付款</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">新品</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">京东国际</div>
  </van-col>

</van-row>
   <van-row gutter="10"  class="bgcolor">
  <van-col span="18">分类</van-col>
  <van-col span="6" class="fontSize">小厨房</van-col>

</van-row>
  <van-row gutter="10" class="bgcolor">
  <van-col span="24" class="title">价格</van-col>
  <van-col span="24">
    <span><input type="text" value="189" class="pricein"> </span>
    <span class="kongg">-</span>
     <span><input type="text" value="650"  class="pricein"> </span>
  </van-col>
  <van-col span="8">
    <div class="xuanx">52-104</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">104-189</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">189-650</div>
  </van-col>
</van-row>
  <van-row class="bgcolor">
  <van-col span="24" class="title">品牌</van-col>
  <van-col span="8">
    <div class="xuanx">京东物流</div>
  </van-col>
  <van-col span="8">
     <div class="xuanx">有货优选</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">货到付款</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">新品</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">京东国际</div>
  </van-col>
    <van-col span="8">
    <div class="xuanx">京东物流</div>
  </van-col>
  <van-col span="8">
     <div class="xuanx">有货优选</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">货到付款</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">新品</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">京东国际</div>
  </van-col>

</van-row>
  <van-row class="bgcolor">
  <van-col span="24" class="title">类别</van-col>
  <van-col span="8">
    <div class="xuanx">京东物流</div>
  </van-col>
  <van-col span="8">
     <div class="xuanx">有货优选</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">货到付款</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">新品</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">京东国际</div>
  </van-col>
    <van-col span="8">
    <div class="xuanx">京东物流</div>
  </van-col>
  <van-col span="8">
     <div class="xuanx">有货优选</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">货到付款</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">新品</div>
  </van-col>
  <van-col span="8">
    <div class="xuanx">京东国际</div>
  </van-col>

</van-row>

      </div>
  <div class="anniu">

    <van-button type="default">取现</van-button>

    <van-button type="danger">确定</van-button>
</div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data () {
    return {
      value: '',
      value1: 0,
      value2: 'a',
      option1: [{ text: '全部商品', value: 0 }, { text: '新款商品', value: 1 }, { text: '活动商品', value: 2 }],
      option2: [{ text: '默认排序', value: 'a' }, { text: '好评排序', value: 'b' }, { text: '销量排序', value: 'c' }],
      result: [],
      result1: [],
      pmccAblie: false,
      ppaiAblie: false,
      show: false
    }
  },
  methods: {
    onConfirm () {},
    ppaiShow () {
      this.ppaiAblie = !this.ppaiAblie
    },
    pmccShow () {
      this.pmccAblie = !this.pmccAblie
    },
    getContainer () {
      return document.querySelector('.my-container')
    },
    shaiXuanShow () {
      this.show = true
    }
  }
}
</script>
<style lang="less" scoped>
.linehr {
  border-bottom: 1px solid #ccc;
}
.van-icon {
  font-size: 26px;
  padding-top: 12px;
}
.xuanz {
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.van-dropdown-menu {
  position: relative;
  .van-item {
    position: absolute;
    left: 30px;
  }
  .van-dropdown-item {
    width: 25%;
    float: left;
    .van-button {
      width: 50%;
    }
  }
}
.message {
  width: 100%;
  height: 40px;
  padding-left: 5px;
  margin: 10px;
  border-bottom: 1px solid #ccc;
  .van-button {
    height: 30px;
    width: 80px;
    background: #f6f5f3;
    line-height: 26px;
    font-size: 12px;
  }
}
.checkxx {
  position: relative;
}
.ppai {
  position: absolute;
  z-index: 9999999;
  background: #fff;
  opacity: 1;
  padding: 0 20px;
  font-size: 12px;
  .van-col {
    padding: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    .van-button {
      width: 100%;
    }
  }
}
.pmcc {
  position: absolute;
  z-index: 9999999;
  background: #fff;
  opacity: 1;
  padding: 0 20px;
  font-size: 12px;
  .van-col {
    padding: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    .van-button {
      width: 100%;
    }
  }
}
.container {
  width: 320px;
  background-color: #eee;

  box-sizing: border-box;
  float: right;
  overflow: hidden;
  .van-row {
    line-height: 40px;
    font-size: 14px;
    margin-bottom: 15px;

    .xuanx {
      width: 80px;
      height: 30px;
      background: #ddd;
      line-height: 30px;
      text-align: center;
      margin: 5px 0;
      font-size: 12px;
      color: #666;
    }
    .pricein {
      background: #ddd;
      width: 43%;
      height: 30px;
      border: 0;
      text-align: center;
    }
    .title {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .kongg {
      margin: 0 10px;
    }
  }
  .bgcolor {
    background-color: #fff;
     padding: 0 15px;
  }
  .fontSize {
    font-size: 12px;
    color: #666;
  }
  .address {
    font-size: 12px;
    color: #f00;
  }

}
  .anniu {

    width: 100%;
    top:100px;
  .van-button {
      width: 50%;
    }
  }
</style>
